<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="./vue.js"></script>
    <link href="./bootstrap.css" rel="stylesheet">
    <!--<link rel="stylesheet" href="http://s.mlcdn.co/animate.css">-->
    <link href="http://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet">
    <title>Document</title>
    <style>
        .finished{
            text-decoration: line-through;
        }
    </style>
</head>
<body>
<h1 class="animated shake">Example</h1>
<div id="app">
    <h1 v-if="isShow">{{ message }}</h1>
    <input v-model="message">
    <br><button v-on:click="reverseMessage">Reverse Message</button>
    <ul>
        <li v-for="todo in todos">
            {{ todo.text }}
        </li>
    </ul>
</div>

<div id="app2">
    <input v-model="newTodo" v-on:keyup.enter="addTodo">
    <ul>
        <!--hinge-->
        <!--这里用v-bind指令来绑定资源,其中括号内是键名,值需要在下面的data中注册-->
        <!--中括号中的大括号是有一个判断是否显示的作用-->
        <li v-for="todo in todos"  v-bind:class="[animation,{finished:todo.isfinished}]" v-on:click="finishTodo(todo)">
            <span>{{ todo.text }}</span>
            <button v-on:click="removeTodo($index)">X</button>
        </li>
    </ul>
</div>


<script>
    new Vue({
        el: '#app',
        data:{
            message : 'hello word',
            isShow:true,
            todos: [
                { text: 'Learn JavaScript' },
                { text: 'Learn Vue.js' },
                { text: 'Build Something Awesome' }
            ]
        },
        methods: {
            reverseMessage: function(){
                this.message = this.message.split('').reverse().join('')
            }
        }
    })
    new Vue({
        el: '#app2',
        data:{
            newTodo:'',
            todos:[],
            animation : 'animated bounceInLeft',
            finished: 'finished'

        },
        methods:{
            addTodo:function(){
                var text = this.newTodo.trim();
                if(text){
                    this.todos.push({text:text,isfinished:false});
                    this.newTodo='';
                }
            },
            removeTodo:function(index){
                this.todos.splice(index,1);
            },
//            这里的方法就是获取传入的todo对象,然后将其中的值取反
            finishTodo:function(todo){
                todo.isfinished = !todo.isfinished;
            }
        }
    })
</script>

</body>
</html>